<template>
  <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="970px">
    <el-form inline size="small">
      <el-form-item><el-input placeholder="请输入关键字" prefix-icon="el-icon-search" v-model="form.name" class="input-with-select"></el-input></el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getFilestemplate(1,'search')">查询</el-button>
        <el-button type="default" plain @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <div>
      <div class="box1">
        <div class="success_f" v-if="form.name && showSearchKey && tableData.length!=0">以下是“{{ form.name }}”相关的文件系统模板：</div>
        <el-table :data="tableData" height="500px" @row-click="handleRowClick">
          <el-table-column prop="name" label="文件"></el-table-column>
          <el-table-column label="选中" width="50">
            <template slot-scope="scope">
              <el-radio v-model="templeteId" :label="scope.row.id"><i /></el-radio>
            </template>
          </el-table-column>
          <empty slot="empty"></empty>
        </el-table>
        <el-card class="">
          <div class="flex_between">
            <el-pagination
              @size-change="sizeChangeHandle"
              @current-change="currentChangeHandle"
              :current-page="pageNo"
              :page-size="pageSize"
              :total="total"
              background
              layout="total, prev, pager, next, jumper"
            ></el-pagination>

            <div class="dialog-footer pub_center">
              <el-button type="info" size="small" v-if="templeteId == ''">使用选中的模板</el-button>
              <el-button type="primary" size="small" @click="submit" v-else>使用选中的模板</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { filestemplate } from '@/api/myapi/common.js';
export default {
  props: {
    title: String,
    type: ''
  },
  data() {
    return {
      dialogVisible: false,
      showSearchKey:false,
      tableData: [],
      templeteId: '',
      form: {
        filesType: '',
        name: '',
        id: ''
      },
      active: 0,
      input: '',
      pageNo: 1,
      total: 1,
      pageSize: 10
    };
  },
  methods: {
    resetSearch() {
      this.form.name = '';
      this.pageNo = 1;
      this.getFilestemplate();
    },
    submit() {
      let templeteFile=this.tableData.find(item=>item.id==this.templeteId);
      this.$emit('onConfirm', templeteFile);
      this.dialogVisible = false;
    },
    init() {
      this.showSearchKey=false;
      this.form.filesType = this.type;
      this.getFilestemplate(1, 'star');
    },
    handleRowClick(row) {
      this.templeteId = row.id;
    },
    // 获取数据列表
    getFilestemplate(pageNo = 1, type) {
      this.loading = true;
      this.pageNo = pageNo;
      filestemplate({
        current: pageNo,
        size: this.pageSize,
        descs: 'create_time',
        ...this.form
      }).then(({ data }) => {
        if (data && data.success) {
          this.tableData = data.data.records;
          this.total = data.data.total;
          this.loading = false;
          if (type == 'star') this.dialogVisible = true;
          if(type=='search') this.showSearchKey=true;
        }
      });
    }
  }
};
</script>

<style scoped="scoped" lang="scss">
.item {
  width: 154px;
  margin: 20px 10px;
}

.box1 {
  // background-color: #f0f2f5;
  padding: 10px;
  margin: 5px;
}

.item .cover {
  border: 2px solid #ffffff;
  position: relative;
  width: 154px;
  height: 218px;
  background-color: #ffffff;
}

.item .active {
  border: 2px solid #126bc9;
  position: relative;
}

.item .icon {
  position: absolute;
  right: 10px;
  top: 10px;
}
</style>
